<template>
  <a-spin :spinning="spinning">
    <a-layout>
      <PageHeader @back="goOut" subTitle="返回"> 编辑 </PageHeader>
      <a-layout>
        <a-layout-sider width="276" class="border-r-line ta-center border">
          <div class="file-user" style="margin-top: 40px">
            <a-row class="file-user-head" style="padding-left: 30px; padding-right: 30px">
              <a-col style="height: 200px">
                <a-row class="pd_b10">
                  <strong style="font-size: 20px">{{ info && info.name ? info.name : "暂无姓名" }}</strong>
                </a-row>
                <a-row>
                  <p style="color: #adadad; padding-bottom: 20px; position: absolute; left: 30px; top: 0px">
                    工时累计 :
                    <span style="color: #222426"> {{ info && info.workHour ? info.workHour : "0" }}工时</span>
                  </p>
                  <p style="color: #adadad; padding-bottom: 20px; position: absolute; left: 30px; top: 35px">
                    出勤天数 :
                    <span style="color: #222426"> {{ info && info.workDay ? info.workDay : "0" }}天</span>
                  </p>
                  <p style="color: #adadad; padding-bottom: 20px; position: absolute; left: 30px; top: 70px">
                    入职日期 :
                    <span style="color: #222426"> {{ info ? formatDate(Number(info.joinDate), "d") : "" }}</span>
                  </p>

                  <p style="color: #adadad; padding-bottom: 20px; position: absolute; left: 30px; top: 105px">
                    工作性质 :
                    <span style="color: #222426"> {{ info ? $store.state.enums.postTypeArr[info.postType - 1] : "" }}</span>
                  </p>

                  <p style="color: #adadad; padding-bottom: 20px; position: absolute; left: 30px; top: 140px">
                    渠道来源 :
                    <span style="color: #222426"> {{ info ? (info.channelName ? info.channelName : "---") : "" }}</span>
                  </p>
                </a-row>
              </a-col>
              <a-divider />
            </a-row>
          </div>
        </a-layout-sider>
        <a-layout-content class="ph24 mb20">
          <!-- <a-col :gutter="24" style="margin-top: 20px">
            <a-alert message="工价规则、招工劳务费规则修改提交后将生成一条新的规则。" banner closable />
          </a-col> -->
          <!-- 工价规则线 -->
          <div class="shu">
            <div class="shuxian"></div>
            <div style="color: #000000; font-size: 16px; margin-left: 10px">定薪规则</div>
          </div>
          <a-radio-group v-model="size" style="margin-top: 16px" @change="radioGroupChange">
            <a-radio-button value="small"> 计时制 </a-radio-button>
            <a-radio-button value="default"> 固定薪资 </a-radio-button>
            <!-- <a-radio-button value="large">
              计天制
            </a-radio-button> -->
          </a-radio-group>
          <!-- 工价规则 -->
          <div v-if="size === 'default'">
            <a-form-model :model="form" style="margin-top: 25px">
              <a-form-model-item
                label=" 调薪模板"
                :rules="{
                  required: true,
                  message: '必选'
                }"
              >
                <div>
                  <a-button class="modelBotton">
                    {{ fixedSalaryTemplateName }}
                  </a-button>
                </div>
              </a-form-model-item>
              <a-form-model-item
                v-if="routerData.formalType === 1"
                :colon="false"
                label=" 调薪明细：试用期工资"
                :rules="{
                  required: true,
                  message: '必选'
                }"
              >
                <a-table :columns="columns" row-key="itemName" :data-source="trainingList" :pagination="false">
                  <template slot="amount" slot-scope="text">
                    {{ text.toFixed(2) }}
                  </template>
                  <template slot="afterAmount" slot-scope="text, record">
                    <div>
                      <a-input-number
                        v-if="record.isSum !== '1'"
                        :default-value="text"
                        :min="0"
                        :step="1"
                        :max="100000"
                        :precision="2"
                        style="margin: -5px 0; width: 120px"
                        @change="(value) => handleInputChange1(value, record.projectId)"
                      />
                      <span v-else>{{ text.toFixed(2) }}</span>
                    </div>
                  </template>
                  <template slot="amplitude" slot-scope="text, record">
                    <span :style="{ color: record.relativecolor }">{{ text }}</span>
                  </template>
                </a-table>
              </a-form-model-item>
              <a-form-model-item
                label=" 正式工资"
                :rules="{
                  required: true,
                  message: '必选'
                }"
              >
                <a-table :columns="columns" row-key="itemName" :data-source="officialList" :pagination="false">
                  <template slot="amount" slot-scope="text">
                    {{ text.toFixed(2) }}
                  </template>
                  <template slot="afterAmount" slot-scope="text, record">
                    <div>
                      <a-input-number
                        v-if="record.isSum !== '1'"
                        :default-value="text"
                        :min="0"
                        :step="1"
                        :max="100000"
                        :precision="2"
                        style="margin: -5px 0; width: 120px"
                        @change="(value) => handleInputChange2(value, record.projectId)"
                      />
                      <span v-else>{{ text.toFixed(2) }}</span>
                    </div>
                  </template>
                  <template slot="amplitude" slot-scope="text, record">
                    <span :style="{ color: record.relativecolor }">{{ text }}</span>
                  </template>
                </a-table>
              </a-form-model-item>
              <a-form-model-item>
                <label><span style="color: red">* </span> <span style="color: rgba(0, 0, 0, 0.85)">调薪原因：</span></label>
                <a-select v-model="form.reason" style="width: 300px; margin-left: 28px" placeholder="请选择">
                  <a-select-option :value="1"> 转正 </a-select-option>
                  <a-select-option :value="2"> 晋升 </a-select-option>
                  <a-select-option :value="3"> 调动 </a-select-option>
                  <a-select-option :value="4"> 年中调薪 </a-select-option>
                  <a-select-option :value="5"> 年度调薪 </a-select-option>
                  <a-select-option :value="6"> 特别调薪 </a-select-option>
                  <a-select-option :value="7"> 其他 </a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item>
                <label><span style="color: red">* </span> <span style="color: rgba(0, 0, 0, 0.85)"> 调薪生效时间： </span></label>
                <a-date-picker style="width: 300px" placeholder="请选择" :disabled-date="disabledEndDate" @change="handleTimeChange" />
              </a-form-model-item>
              <a-form-model-item :label-col="{ span: 1 }" :wrapper-col="{ span: 13 }" label="备注">
                <a-textarea v-model="form.remark" style="width: 400px; margin-left: 64px" :max-length="50" />
                <a-row style="width: 465px" class="ta-right textarea-tip"> {{ form.remark ? form.remark.length : 0 }}/50字 </a-row>
              </a-form-model-item>
            </a-form-model>
          </div>
          <div v-if="size === 'small' || size === 'large'">
            <div style="margin-top: 15px" class="gj">
              <span style="margin-right: 20px">工价规则</span>
              <a-select
                show-search
                option-filter-prop="children"
                :filter-option="filterOption"
                placeholder="请选择"
                allowClear
                style="width: 220px"
                v-model="salaryCalculateRuleId"
                @change="handleRulesChange"
              >
                <a-select-option v-for="(item, index) in rulusListCopy" :key="index" :value="item.id">{{ item.name }}</a-select-option>
              </a-select>

              <!-- <span class="title" @click="createDrawer">
                <a-icon class="addIcon" type="plus-circle" style="font-size: 18px; margin: 0 5px 0 25px" />新增模板
              </span> -->
            </div>
            <div style="margin-top: 15px; font-size: 16px; font-weight: 400; color: #000000">已添加规则</div>
            <div style="margin-top: 15px">
              <a-table rowKey="id" :columns="columns2" :data-source="dataList" :pagination="paginationOpt"> </a-table>
            </div>
          </div>

          <!-- 工价动态表单 -->

          <!-- 招工劳务费规则 -->
          <div class="shu2">
            <div class="shuxian"></div>
            <div style="color: #000000; font-size: 16px; margin-left: 10px">招工劳务费规则</div>
          </div>
          <div style="margin-top: 15px" class="gj">
            <span style="margin-right: 20px">招工劳务费规则</span>
            <a-select
              show-search
              option-filter-prop="children"
              :filter-option="filterOption"
              placeholder="请选择"
              allowClear
              style="width: 220px"
              v-model="redPackId"
              @change="redPackChange"
            >
              <a-select-option v-for="(item, index) in redPack" :key="index" :value="item.id">{{ item.name }}</a-select-option>
            </a-select>

            <!-- <span class="title" @click="createDrawer1">
              <a-icon class="addIcon" type="plus-circle" style="font-size: 18px; margin: 0 5px 0 25px" />新增模板
            </span> -->
          </div>
          <div style="margin-top: 15px; font-size: 16px; font-weight: 400; color: #000000">已添加规则</div>
          <div style="margin-top: 15px">
            <a-table rowKey="id" :columns="columns2" :data-source="dataList2" :pagination="paginationOpt2"> </a-table>
          </div>
          <div v-if="ruleShow1" style="margin-bottom: 40px"></div>
          <a-divider />
          <a-row>
            <a-col class="fr">
              <a-button class="mg_r10" @click="goOut">取消</a-button>
              <a-button type="primary" @click="handleEmpyleeSubmitType">保存</a-button>
            </a-col>
          </a-row>
        </a-layout-content>
      </a-layout>
      <!-- 新增工价规则弹窗组件 -->
      <drawer ref="drawers" @update="update"></drawer>
      <drawers ref="drawersl" @fatherMethod="fatherMethod"></drawers>
    </a-layout>
  </a-spin>
</template>
<script>
import { salaryCalculateRulesListall, saveSalaryCalculateRule } from "@/api/staff/staff";
import { getEmpInfoId } from "./api";
import drawer from "./drawer.vue";
import drawers from "./drawers.vue";
const columns = [
  {
    title: "调薪项目",
    dataIndex: "itemName",
    align: "itemName",
    key: "itemName",
    scopedSlots: { customRender: "itemName" },
    width: 150
  },
  {
    title: "调薪前",
    dataIndex: "amount",
    align: "amount",
    key: "amount",
    scopedSlots: { customRender: "amount" },
    width: 150
  },
  {
    title: "调薪后",
    dataIndex: "afterAmount",
    align: "afterAmount",
    key: "afterAmount",
    scopedSlots: { customRender: "afterAmount" },
    width: 150
  },
  {
    title: "调薪幅度",
    dataIndex: "amplitude",
    align: "amplitude",
    key: "amplitude",
    scopedSlots: { customRender: "amplitude" },
    width: 150
  }
];
import { selectByCompanyId, SalaryIncrease, empAdjustable, detaiByempId, empWage } from "@/api/wages/file";
import {
  salaryCalculateRules,
  salaryCalculateRulesList,
  getSalaryCalculateRuleGroups,
  salaryRulesListByPage,
  editEmpInfos
} from "@/api/outsourcing/outrules";
import { mapState } from "vuex";
const fixItems = [
  {
    id: 1,
    name: "基本工资",
    selected: true,
    isDefault: true
  },
  {
    id: 2,
    name: "交通补贴",
    selected: false,
    isDefault: false
  },
  {
    id: 3,
    name: "住房补贴",
    selected: false,
    isDefault: false
  },
  {
    id: 4,
    name: "全勤奖",
    selected: false,
    isDefault: false
  },
  {
    id: 5,
    name: "餐补",
    selected: false,
    isDefault: false
  },
  {
    id: 6,
    name: "高温补贴",
    selected: false,
    isDefault: false
  },
  {
    id: 7,
    name: "工龄补贴",
    selected: false,
    isDefault: false
  },
  {
    id: 8,
    name: "夜班津贴",
    selected: false,
    isDefault: false
  },
  {
    id: 9,
    name: "通讯补贴",
    selected: false,
    isDefault: false
  },
  {
    id: 10,
    name: "节假日补贴",
    selected: false,
    isDefault: false
  },
  {
    id: 11,
    name: "员工慰问金",
    selected: false,
    isDefault: false
  },
  {
    id: 12,
    name: "推荐奖",
    selected: false,
    isDefault: false
  },
  {
    id: 13,
    name: "职务津贴",
    selected: false,
    isDefault: false
  },
  {
    id: 14,
    name: "绩效工资",
    selected: false,
    isDefault: false
  },
  {
    id: 15,
    name: "季度奖",
    selected: false,
    isDefault: false
  },
  {
    id: 16,
    name: "销售提成",
    selected: false,
    isDefault: false
  },
  {
    id: 17,
    name: "计件工资",
    selected: false,
    isDefault: false
  },
  {
    id: 18,
    name: "工龄工资",
    selected: false,
    isDefault: false
  },
  {
    id: 19,
    name: "司龄工资",
    selected: false,
    isDefault: false
  },
  {
    id: 20,
    name: "职称工资",
    selected: false,
    isDefault: false
  },
  {
    id: 21,
    name: "技能工资",
    selected: false,
    isDefault: false
  },
  {
    id: 22,
    name: "学历工资",
    selected: false,
    isDefault: false
  }
];
const columns2 = [
  {
    title: "生效时间",
    dataIndex: "timeShow",
    key: "timeShow",
    width: 100
  },
  {
    title: "基础规则",
    dataIndex: "hourAmountRuleShow",
    key: "hourAmountRuleShow1",
    width: 120
  },
  {
    title: "离职规则",
    dataIndex: "leaveOfficeRuleShow",
    key: "leaveOfficeRuleShow",
    width: 120
  }
];
export default {
  data() {
    return {
      columns2,
      dataList2: [],
      dataList: [],
      columns,
      showType: null,
      showType2: null,
      show: false,
      size: "small",
      show1: false,
      spinning: true,
      salaryCalculateRuleId: undefined,
      rulusList: [],
      ruleShow: false,
      redPack: [],
      fixedSalaryTemplateName: null,
      fixItems,
      addForm: {
        name: ""
      },
      addVisible: false,
      lastId: "",
      lastName: "",
      buttonState: false,
      form: {},
      empName: "",
      detailsListCopy: [],
      trialTemplateList: [],
      formalTemplateList: [],
      detailsList: [],
      templateId: "",
      templateList: [],
      companyId: this.$store.state.hr.companyId,
      desc: "",
      routerDatas: {},
      rules2: {
        name: [{ required: true, message: "必填", trigger: "blur" }]
      },
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      currentPage: null,
      ruleShow1: false,
      redPackId: undefined,
      addManFormRef: {
        numList: [],
        leaveList: [],
        hourAmountDouble: null // 劳工
      },
      option2: [
        // 劳工
        {
          label: "月",
          value: 1
        },
        {
          label: "天",
          value: 2
        },
        {
          label: "工时",
          value: 3
        }
      ],
      option: [
        // 劳工
        {
          label: "月",
          value: 1
        },
        {
          label: "天",
          value: 2
        },
        {
          label: "工时",
          value: 3
        }
      ],
      addManFormRef1: {
        commissionRatio1: null,
        hourAmountDouble1: null, // 劳务费
        changeList: [],
        numList1: [],
        leaveList1: [],
        specialCostDouble: undefined
      },
      rules: {
        specialCostDouble: [{ required: true, message: "请输入", trigger: "change" }]
      },
      checked3: false, // 工时抽成
      checked4: false,
      checked5: false,
      checked6: false,
      info: {},
      checked: false,
      checked1: false,
      labourList: [],
      mainId: null,
      takeDate: null,

      trainingList: [],
      officialList: [],
      empId: "",
      number: "",

      edit: false,
      routerData: {},
      rulusListCopy: [],
      oldData: {},
      putData: {
        salaryPerformance: "",
        mealSubsidy: "",
        trafficSubsidy: "",
        salaryBasic: "",
        reason: "",
        remark: ""
      },
      paginationOpt2: {
        current: 1,
        defaultCurrent: 1, // 默认当前页数
        // defaultPageSize: 5, // 默认当前页显示数据的大小
        total: 0, // 总数，必须先有
        showSizeChanger: true,
        showQuickJumper: true,

        pageSizeOptions: ["10", "20", "50", "100"],
        showTotal: (total) => `共 ${total} 条`, // 显示总数
        onShowSizeChange: (current, pageSize) => {
          this.paginationOpt2.current = 1;
          this.paginationOpt2.defaultCurrent = 1;
          this.paginationOpt2.defaultPageSize = pageSize;
          this.laowufeiguize(); // 显示列表的接口名称
        },
        // 改变每页数量时更新显示
        onChange: (current, size) => {
          this.paginationOpt2.current = current;
          this.paginationOpt2.defaultCurrent = current;
          this.paginationOpt2.defaultPageSize = size;
          this.laowufeiguize();
        }
      },
      paginationOpt: {
        current: 1,
        defaultCurrent: 1, // 默认当前页数
        // defaultPageSize: 5, // 默认当前页显示数据的大小
        total: 0, // 总数，必须先有
        showSizeChanger: true,
        showQuickJumper: true,

        pageSizeOptions: ["10", "20", "50", "100"],
        showTotal: (total) => `共 ${total} 条`, // 显示总数
        onShowSizeChange: (current, pageSize) => {
          this.paginationOpt.current = 1;
          this.paginationOpt.defaultCurrent = 1;
          this.paginationOpt.defaultPageSize = pageSize;
          this.gongjiaguize(); // 显示列表的接口名称
        },
        // 改变每页数量时更新显示
        onChange: (current, size) => {
          this.paginationOpt.current = current;
          this.paginationOpt.defaultCurrent = current;
          this.paginationOpt.defaultPageSize = size;
          this.gongjiaguize();
        }
      }
    };
  },
  computed: {
    ...mapState(["hr"]),
    doWords() {
      return ["salaryPerformance", "mealSubsidy", "trafficSubsidy", "salaryBasic"];
    },
    status() {
      return ["待入职", "入职", "待离职", "离职"][this.routerData.status - 1];
    },
    putAllMoney() {
      const { salaryPerformance, mealSubsidy, trafficSubsidy, salaryBasic } = this.putData;
      const arr = [salaryPerformance, mealSubsidy, trafficSubsidy, salaryBasic];
      return arr.reduce((preValue, curValue) => Number(preValue) + Number(curValue), 0);
    },
    reasons() {
      return [
        { label: "转正", value: "1" },
        { label: "晋升", value: "2" },
        { label: "调动", value: "3" },
        { label: "年中调薪", value: "4" },
        { label: "年度调薪", value: "5" },
        { label: "特别调薪", value: "6" },
        { label: "其他", value: "7" }
      ];
    }
  },
  components: {
    drawer,
    drawers
  },
  beforeDestory() {
    this.clearInterval(this.timer);
  },
  created() {
    this.size = "default";
    this.routerDatas = JSON.parse(this.$route.query.routerData);
    this.currentPage = this.$route.query.currentPage;
    this.getSelectByCompanyId();
    if (this.$route.query.state === "outsourcing") {
      const params = {
        pageNo: 1,
        pageSize: "10",
        companyId: this.companyId,
        empId: this.$route.query.empId
      };
      console.log(this.$route.query.empId);
      getEmpInfoId(this.$route.query.empId, this.companyId).then((res) => {
        this.info = res.data;
        // this.info == null 会报错。
        this.salaryCalculateListall();
      });
    } else {
      this.salaryCalculateListall();
      this.info = JSON.parse(this.$route.query.info);
      if (!this.info.channelName && this.info.channelVO !== null) {
        this.info.channelName = this.info.channelVO.name;
      }
    }
    setTimeout(() => {
      this.spinning = false;
    }, 1000);
    this.currentPage = this.$route.query.currentPage;
    this.routerData = JSON.parse(this.$route.query.routerData);
    this.redPackId = this.info.serviceFeeRuleId ? this.info.serviceFeeRuleId : undefined;
    if (this.redPackId) {
      salaryRulesListByPage({
        pageNo: this.paginationOpt2.defaultCurrent,
        pageSize: this.paginationOpt2.defaultPageSize,
        salaryCalculateRuleGroupId: this.redPackId
      }).then((res) => {
        this.dataList2 = res.data.entities;
        this.paginationOpt2.total = res.data.entityCount;
      });
    } else {
      this.dataList2 = [];
    }
    this.getSelectByCompanyId();
    this.SalaryIncreaseList();
  },
  methods: {
    gongjiaguize() {
      if (this.salaryCalculateRuleId) {
        salaryRulesListByPage({
          pageNo: this.paginationOpt.defaultCurrent,
          pageSize: this.paginationOpt.defaultPageSize,
          salaryCalculateRuleGroupId: this.salaryCalculateRuleId
        }).then((res) => {
          this.dataList = res.data.entities;
          this.paginationOpt.total = res.data.entityCount;
        });
      } else {
        this.dataList = [];
      }
    },
    laowufeiguize() {
      if (this.redPackId) {
        salaryRulesListByPage({
          pageNo: this.paginationOpt2.defaultCurrent,
          pageSize: this.paginationOpt2.defaultPageSize,
          salaryCalculateRuleGroupId: this.redPackId
        }).then((res) => {
          this.dataList2 = res.data.entities;
          this.paginationOpt2.total = res.data.entityCount;
        });
      } else {
        this.dataList2 = [];
      }
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    },
    goBack() {
      this.$router.push({
        path: "/wages/file",
        query: {
          currentPage: this.currentPage
        }
      });
    },
    handleAddSelected(item) {
      if (item.id === 1) return;
      item.selected = !item.selected;
    },
    computeItemClass(item) {
      if (item.id === 1) return "fix-salary-item-tag fix-salary-item-default";
      if (item.selected) return "fix-salary-item-tag fix-salary-item-selected";
      return "fix-salary-item-tag";
    },
    handleAddCancel() {
      this.$refs.addForm.clearValidate();
    },
    goIncrease() {
      this.addVisible = true;
      this.addForm = {};
      this.fixItems.forEach((item, index) => {
        if (index > 0) item.selected = false;
      });
    },
    templateChange(id, key, item) {
      // item.style = "buttonStyleClick";
      this.templateList[0].style = null;
      this.fixedSalaryTemplateName = item.name;
      // this.templateList[0].color = null;
      for (var i = 0; i < this.templateList.length; i++) {
        if (this.templateList[i].id === id) {
          this.templateList[i].style = "buttonStyleClick";
        } else {
          this.templateList[i].style = null;
        }
      }
      this.detailsList = [];
      this.templateId = id;
      this.detailsList;
      this.getDetaiByempId();
    },
    getDetaiByempId() {
      const id = this.templateId ? this.templateId : this.lastId;
      detaiByempId(id).then((res) => {
        this.detailsList = res.data;
        this.trialTemplateList = JSON.parse(JSON.stringify(res.data));
        this.formalTemplateList = JSON.parse(JSON.stringify(res.data));
        for (var i = 0; i < this.detailsList.length; i++) {
          this.detailsList[i].projectId = i;
          this.detailsList[i].trial = this.detailsList[i].trial ? this.detailsList[i].trial : 0;
          this.detailsList[i].formal = this.detailsList[i].formal ? this.detailsList[i].formal : 0;
        }
      });
    },
    getSelectByCompanyId() {
      selectByCompanyId({ companyId: this.companyId }).then((res) => {
        this.templateList = res.data;
        this.templateList.forEach((item, index) => {
          this.templateList[0].style = "buttonStyleClick";
        });
        this.templateId = this.templateList[0].id;
        this.lastId = this.templateList[0].id;
        this.lastName = this.templateList[0].name;
        // this.templateList[0].color = "#6A66F6";
        this.getDetaiByempId();
      });
    },
    goOut() {
      this.$router.go(-1);
      // const _this = this;
      // this.$confirm({
      //   title: "员工定薪尚未保存，是否确认离开？",
      //   okText: "确定",
      //   cancelText: "取消",
      //   onOk() {
      //     _this.$router.go(-1);
      //   }
      // });
    },
    // 表格输入框变化
    handleInputChange(value, key, col) {
      const arr = JSON.parse(JSON.stringify(this.detailsList));
      if (col === "trial") {
        for (var i = 0; i < arr.length; i++) {
          if (i === key) {
            arr[i].trial = value;
            this.trialTemplateList[i].amount = value;
            this.trialTemplateList[i].name = this.trialTemplateList[i].itemName;
            // this.trialTemplateList[i].projectId = key
          }
        }
        var s = 0;
        for (var t = 0; t < arr.length - 1; t++) {
          s += arr[t].trial;
          arr[arr.length - 1].trial = s;
          this.trialTemplateList[this.trialTemplateList.length - 1].amount = s;
        }
      }
      if (col === "formal") {
        for (var p = 0; p < arr.length; p++) {
          if (p === key) {
            arr[p].formal = value;
            this.formalTemplateList[p].amount = value;
            this.formalTemplateList[p].name = this.formalTemplateList[p].itemName;
            // this.formalTemplateList[p].projectId = key
          }
        }
        var sum = 0;
        for (var a = 0; a < arr.length - 1; a++) {
          sum += arr[a].formal;
          arr[arr.length - 1].formal = sum;
          this.formalTemplateList[this.formalTemplateList.length - 1].amount = sum;
        }
      }

      this.detailsList = JSON.parse(JSON.stringify(arr));
    },
    // 获取数组里的每一个时间
    onDateChange(date, dateString, item) {
      item.time = dateString;
    },
    // 返回
    // goOut() {
    //   setTimeout(() => {
    //     this.$router.push({
    //       path: "/wages/file",
    //       query: {
    //         tabsKey: "2"
    //       }
    //     });
    //   }, 500);
    // },
    // 打开工价新增弹窗
    createDrawer() {
      this.$refs.drawers.onCreate();
    },
    // 打开劳务费新增弹窗
    createDrawer1() {
      this.$refs.drawersl.onCreate();
    },
    // 劳务费添加完成更新列表
    fatherMethod() {
      salaryCalculateRulesListall({ ruleType: 2 }).then((res) => {
        this.redPack = res.data;
      });
    },
    // 工价添加完成更新列表
    update() {
      this.rulusList = [];
      salaryCalculateRulesListall().then((res) => {
        if (res.data.length > 0) {
          res.data.map((item) => {
            if (item.ruleType === 1 || item.ruleType === 3) {
              this.rulusList.push(item);
            }
          });
        }
      });
    },
    handleEmpyleeSubmit(e) {
      var that = this;
      const salaryRuleAddDTO = {};
      const serviceFeeRuleAddDTO = {};
      // e.preventDefault();
      // 工价
      if (this.ruleShow) {
        if (this.salaryCalculateRuleId !== "" && this.salaryCalculateRuleId !== null && this.salaryCalculateRuleId !== undefined) {
          this.$refs.addManForm.validate((valid) => {
            if (valid) {
              const labourList = JSON.parse(JSON.stringify(this.labourList)); // 工价数组
              const leaveList = JSON.parse(JSON.stringify(this.addManFormRef.leaveList)); // 倒扣数组
              labourList.map((item) => {
                item.type = Number(item.type);
              });
              leaveList.map((item) => {
                item.type = Number(item.type);
              });
              salaryRuleAddDTO.showType = this.showType;
              salaryRuleAddDTO.hourAmountDouble = this.addManFormRef.hourAmountDouble;
              salaryRuleAddDTO.hourAmountRule = JSON.stringify(labourList);
              salaryRuleAddDTO.leaveOfficeRule = JSON.stringify(leaveList);
              salaryRuleAddDTO.redPacketRule = JSON.stringify(this.addManFormRef.numList);
              this.show = true;
            } else {
              this.show = false;
            }
          });
        }
      }
      // 劳务费
      if (this.redPackId !== "" && this.redPackId !== null && this.redPackId !== undefined) {
        this.$refs.addManForm1.validate((valid) => {
          if (valid) {
            const labourList1 = JSON.parse(JSON.stringify(this.addManFormRef1.changeList)); // 劳务费工价数组
            const leaveList1 = JSON.parse(JSON.stringify(this.addManFormRef1.leaveList1)); // 劳务费倒扣数组
            labourList1.map((item) => {
              item.type = Number(item.type);
            });
            leaveList1.map((item) => {
              item.type = Number(item.type);
            });
            serviceFeeRuleAddDTO.showType = this.showType2;
            serviceFeeRuleAddDTO.hourAmountDouble = this.addManFormRef1.hourAmountDouble1;
            serviceFeeRuleAddDTO.commissionRatio = this.addManFormRef1.commissionRatio1;
            serviceFeeRuleAddDTO.hourAmountRule = JSON.stringify(labourList1);
            serviceFeeRuleAddDTO.leaveOfficeRule = JSON.stringify(leaveList1);
            serviceFeeRuleAddDTO.redPacketRule = JSON.stringify(this.addManFormRef1.numList1);
            serviceFeeRuleAddDTO.specialCostDouble = this.addManFormRef1.specialCostDouble;
            this.show1 = true;
          } else {
            this.show1 = false;
          }
        });
      }
      // 两个规则都存在并且值都填满调用接口没有问题
      if (this.show && this.show1) {
        const values = {
          empId: this.info.id,
          phone: this.info.phone,
          empName: this.info.name,
          companyId: this.companyId, // 租户id
          salaryRuleAddDTO: salaryRuleAddDTO, // 工价数据
          serviceFeeRuleAddDTO: serviceFeeRuleAddDTO, // 劳务费数据
          serviceFeeRuleId: this.redPackId, // 劳务费id
          salaryRuleId: this.salaryCalculateRuleId // 工价id
        };
        saveSalaryCalculateRule(values).then((res) => {
          this.$message.success("编辑成功");
          if (this.$route.query.state === "outsourcing") {
            this.$router.push({
              path: "/staff/employee"
            });
          } else {
            setTimeout(() => {
              this.$router.push({
                path: "/wages/file",
                query: {
                  tabsKey: "2"
                }
              });
            }, 500);
          }
        });
      }
      // 如果两个规则id都不存在的话没有问题
      if (!this.ruleShow && !this.ruleShow1) {
        const values = {
          empId: this.info.id,
          phone: this.info.phone,
          empName: this.info.name,
          companyId: this.companyId, // 租户id
          serviceFeeRuleId: this.redPackId ? this.redPackId : "", // 劳务费id
          salaryRuleId: this.salaryCalculateRuleId ? this.salaryCalculateRuleId : "" // 工价id
        };
        saveSalaryCalculateRule(values).then((res) => {
          this.$message.success("编辑成功");
          setTimeout(() => {
            this.$router.push({
              path: "/wages/file",
              query: {
                tabsKey: "2"
              }
            });
          }, 500);
        });
      }
      // 首先先判断两个规则都存在，但是内容是没有填写完整，给提示，填写完成以后进入都存在的判断中
      if (this.ruleShow && this.ruleShow1) {
        if (!this.show && !this.show1) {
          this.$message.error("规则内容都为必填");
        }
        if (this.show && !this.show1) {
          this.$message.error("劳务费规则内容都为必填");
        }
        if (this.show1 && !this.show) {
          this.$message.error("工价规则内容都为必填");
        }
      }
      // 当一个规则存在,另一个规则不存在的时候请求，并且判断存在的规则内容有没有填写完毕
      if (this.ruleShow && !this.ruleShow1) {
        if (this.show) {
          const values = {
            empId: this.info.id,
            phone: this.info.phone,
            empName: this.info.name,
            companyId: this.companyId, // 租户id
            serviceFeeRuleId: "", // 劳务费id
            salaryRuleId: this.salaryCalculateRuleId, // 工价id
            salaryRuleAddDTO: salaryRuleAddDTO // 工价数据
          };
          saveSalaryCalculateRule(values).then((res) => {
            this.$message.success("编辑成功");
            setTimeout(() => {
              this.$router.push({
                path: "/wages/file",
                query: {
                  tabsKey: "2"
                }
              });
            }, 500);
          });
        }
      }
      if (this.ruleShow1 && !this.ruleShow) {
        if (this.show1) {
          const values = {
            empId: this.info.id,
            phone: this.info.phone,
            empName: this.info.name,
            companyId: this.companyId, // 租户id
            serviceFeeRuleAddDTO: serviceFeeRuleAddDTO, // 劳务费数据
            serviceFeeRuleId: this.redPackId, // 劳务费id
            salaryRuleId: this.salaryCalculateRuleId // 工价id
          };
          saveSalaryCalculateRule(values).then((res) => {
            this.$message.success("编辑成功");
            setTimeout(() => {
              this.$router.push({
                path: "/wages/file",
                query: {
                  tabsKey: "2"
                }
              });
            }, 500);
          });
        }
      }
    },
    limitNumber(value) {
      if (typeof value === "string") {
        return !isNaN(Number(value)) ? value.replace(/\./g, "") : 0;
      } else if (typeof value === "number") {
        return !isNaN(value) ? String(value).replace(/\./g, "") : 0;
      } else {
        return 0;
      }
    },
    // 工价列表下拉事件渲染数据
    // handleRulesChange(e) {
    //   if (e) {
    //     this.salaryCalculateRuleId = e;

    //     this.rulusList.map(item => {
    //       if (item.id === e) {
    //         console.log(e, item);
    //         if (item.ruleType === 1 || item.ruleType === 3) {
    //           this.ruleShow = true;
    //           this.showType = item.showType;
    //           if (item.showType === 1) {
    //             this.option = [
    //               {
    //                 label: "月",
    //                 value: 1
    //               },
    //               {
    //                 label: "天",
    //                 value: 3
    //               }
    //             ];
    //           } else {
    //             this.option = [
    //               {
    //                 label: "月",
    //                 value: 1
    //               },
    //               {
    //                 label: "天",
    //                 value: 2
    //               },
    //               {
    //                 label: "工时",
    //                 value: 3
    //               }
    //             ];
    //           }
    //           this.addManFormRef.hourAmountDouble = item.hourAmountDouble;
    //           this.labourList = JSON.parse(item.hourAmountRule) || [];
    //           this.addManFormRef.numList = JSON.parse(item.redPacketRule) || [];
    //           this.addManFormRef.leaveList = JSON.parse(item.leaveOfficeRule) || [];
    //           this.labourList.map(item => {
    //             item.type = String(item.type);
    //           });
    //           this.addManFormRef.leaveList.map(item => {
    //             item.type = String(item.type);
    //           });
    //           if (this.addManFormRef.numList.length > 0) {
    //             this.checked = true;
    //           }
    //           if (this.addManFormRef.leaveList.length > 0) {
    //             this.checked1 = true;
    //           }
    //         } else {
    //           this.ruleShow = false;
    //         }
    //       }
    //     });
    //   } else {
    //     this.ruleShow = false;
    //     this.show = false;
    //   }
    // },
    handleRulesChange(e) {
      if (e) {
        this.paginationOpt.defaultCurrent = 1;
        this.paginationOpt.defaultPageSize = 10;
        salaryRulesListByPage({
          pageNo: this.paginationOpt.defaultCurrent,
          pageSize: this.paginationOpt.defaultPageSize,
          salaryCalculateRuleGroupId: e
        }).then((res) => {
          this.dataList = res.data.entities;
          this.paginationOpt.total = res.data.entityCount;
        });
      } else {
        this.dataList = [];
        this.paginationOpt.total = 0;
      }
    },
    // 劳务费规则下拉事件渲染数据
    redPackChange(e) {
      if (e) {
        this.paginationOpt2.defaultCurrent = 1;
        this.paginationOpt2.defaultPageSize = 10;
        salaryRulesListByPage({
          pageNo: this.paginationOpt2.defaultCurrent,
          pageSize: this.paginationOpt2.defaultPageSize,
          salaryCalculateRuleGroupId: e
        }).then((res) => {
          this.dataList2 = res.data.entities;
          this.paginationOpt2.total = res.data.entityCount;
        });
      } else {
        this.dataList2 = [];
        this.paginationOpt2.total = 0;
      }
    },
    // redPackChange(e) {
    //   if (e) {
    //     this.redPackId = e;
    //     this.ruleShow1 = true;

    //     this.redPack.map(item => {
    //       if (item.id === e) {
    //         this.showType2 = item.showType;
    //         console.log(this.showType2);
    //         if (item.showType === 1) {
    //           this.option2 = [
    //             {
    //               label: "月",
    //               value: 1
    //             },
    //             {
    //               label: "天",
    //               value: 3
    //             }
    //           ];
    //         } else {
    //           this.option2 = [
    //             {
    //               label: "月",
    //               value: 1
    //             },
    //             {
    //               label: "天",
    //               value: 2
    //             },
    //             {
    //               label: "工时",
    //               value: 3
    //             }
    //           ];
    //         }
    //         this.addManFormRef1.commissionRatio1 = item.commissionRatio;
    //         this.addManFormRef1.hourAmountDouble1 = item.hourAmountDouble;
    //         this.addManFormRef1.changeList = JSON.parse(item.hourAmountRule);
    //         this.addManFormRef1.numList1 = JSON.parse(item.redPacketRule);
    //         this.addManFormRef1.leaveList1 = JSON.parse(item.leaveOfficeRule);
    //         this.addManFormRef1.specialCostDouble = item.specialCostDouble;
    //         this.addManFormRef1.changeList.map(item => {
    //           item.type = String(item.type);
    //         });
    //         this.addManFormRef1.leaveList1.map(item => {
    //           item.type = String(item.type);
    //         });
    //         if (
    //           this.addManFormRef1.changeList.length > 0 ||
    //           this.addManFormRef1.hourAmountDouble1 !== 0 ||
    //           this.addManFormRef1.commissionRatio1 > 0
    //         ) {
    //           this.checked3 = true;
    //         }
    //         if (this.addManFormRef1.numList1.length > 0) {
    //           this.checked4 = true;
    //         }
    //         if (this.addManFormRef1.leaveList1.length > 0) {
    //           this.checked5 = true;
    //         }
    //         if (this.addManFormRef1.specialCostDouble) {
    //           this.checked6 = true;
    //         }
    //       }
    //     });
    //   } else {
    //     this.ruleShow1 = false;
    //     this.show1 = false;
    //   }
    // },
    // 获取工价劳务费规则列表并首次渲染页面数据
    salaryCalculateListall() {
      getSalaryCalculateRuleGroups({
        companyId: this.$store.state.hr.companyId
      }).then((res) => {
        res.data.forEach((item, index) => {
          if (item.ruleType === 1) {
            this.rulusListCopy.push(item);
          } else if (item.ruleType === 2) {
            this.redPack.push(item);
          }
        });
      });
      // salaryCalculateRulesListall().then(res => {
      //   if (res.data.length > 0) {
      //     res.data.map(item => {
      //       if (item.ruleType === 1 || item.ruleType === 3) {
      //         this.rulusList.push(item);
      //         this.salaryCalculateRuleId = this.info.salaryRuleId;
      //         if (this.salaryCalculateRuleId !== "") {
      //           this.rulusList.map(item => {
      //             if (item.id === this.salaryCalculateRuleId) {
      //               if (item.ruleType === 1) {
      //                 this.ruleShow = true;
      //                 this.showType = item.showType;
      //                 if (item.showType === 1 || item.showType === 3) {
      //                   this.option = [
      //                     {
      //                       label: "月",
      //                       value: 1
      //                     },
      //                     {
      //                       label: "天",
      //                       value: 3
      //                     }
      //                   ];
      //                 } else {
      //                   this.option = [
      //                     {
      //                       label: "月",
      //                       value: 1
      //                     },
      //                     {
      //                       label: "天",
      //                       value: 2
      //                     },
      //                     {
      //                       label: "工时",
      //                       value: 3
      //                     }
      //                   ];
      //                 }
      //                 this.addManFormRef.hourAmountDouble = item.hourAmountDouble;
      //                 this.labourList = JSON.parse(item.hourAmountRule) || [];
      //                 this.addManFormRef.numList = JSON.parse(item.redPacketRule) || [];
      //                 this.addManFormRef.leaveList = JSON.parse(item.leaveOfficeRule) || [];
      //                 this.labourList.map(item => {
      //                   item.type = String(item.type);
      //                 });
      //                 this.addManFormRef.leaveList.map(item => {
      //                   item.type = String(item.type);
      //                 });
      //                 if (this.addManFormRef.numList.length > 0) {
      //                   this.checked = true;
      //                 }
      //                 if (this.addManFormRef.leaveList.length > 0) {
      //                   this.checked1 = true;
      //                 }
      //               } else {
      //                 this.ruleShow = false;
      //               }
      //             }
      //           });
      //         }
      //       }
      //     });
      //   }
      // });
      // salaryCalculateRulesListall({ ruleType: 2 }).then(res => {
      //   this.redPack = res.data;
      //   this.redPackId = this.info.serviceFeeRuleId;
      //   if (this.redPackId !== "") {
      //     this.redPack.map(item => {
      //       if (item.id === this.redPackId) {
      //         this.ruleShow1 = true;
      //         this.showType2 = item.showType;
      //         if (item.showType === 1) {
      //           this.option2 = [
      //             {
      //               label: "月",
      //               value: 1
      //             },
      //             {
      //               label: "天",
      //               value: 3
      //             }
      //           ];
      //         } else {
      //           this.option2 = [
      //             {
      //               label: "月",
      //               value: 1
      //             },
      //             {
      //               label: "天",
      //               value: 2
      //             },
      //             {
      //               label: "工时",
      //               value: 3
      //             }
      //           ];
      //         }
      //         this.addManFormRef1.commissionRatio1 = item.commissionRatio;
      //         this.addManFormRef1.hourAmountDouble1 = item.hourAmountDouble;
      //         this.addManFormRef1.changeList = JSON.parse(item.hourAmountRule);
      //         this.addManFormRef1.numList1 = JSON.parse(item.redPacketRule);
      //         this.addManFormRef1.leaveList1 = JSON.parse(item.leaveOfficeRule);
      //         this.addManFormRef1.specialCostDouble = item.specialCostDouble;
      //         this.addManFormRef1.changeList.map(item => {
      //           item.type = String(item.type);
      //         });
      //         this.addManFormRef1.leaveList1.map(item => {
      //           item.type = String(item.type);
      //         });
      //         if (
      //           this.addManFormRef1.changeList.length > 0 ||
      //           this.addManFormRef1.hourAmountDouble1 !== 0 ||
      //           this.addManFormRef1.commissionRatio1 > 0
      //         ) {
      //           this.checked3 = true;
      //         }
      //         if (this.addManFormRef1.numList1.length > 0) {
      //           this.checked4 = true;
      //         }
      //         if (this.addManFormRef1.leaveList1.length > 0) {
      //           this.checked5 = true;
      //         }
      //         if (this.addManFormRef1.specialCostDouble) {
      //           this.checked6 = true;
      //         }
      //       }
      //     });
      //   }
      // });
    },
    // 工价计算数组
    handleMenuClick1(e) {
      if (e.key === "2") {
        this.labourList.push({
          type: e.key,
          number: null,
          units: "",
          newHourAmount: null
        }); // 不满月/天/工时倒扣工资
      } else {
        this.labourList.push({
          type: e.key,
          time: null,
          newHourAmount: null
        }); // 不满月/天/工时减少全价
      }
    },
    // 工价一次性红包添加事件
    onChange(e) {
      if (e.target.checked) {
        this.addManFormRef.numList.push({
          number: null,
          units: "",
          redPacketAmount: null
        });
        this.checked = true;
      } else {
        this.addManFormRef.numList = [];
        this.checked = false;
      }
    },
    // 工价一次性红包删除
    deleteNumList(item, index) {
      this.addManFormRef.numList.splice(index, 1);
      if (this.addManFormRef.numList.length === 0) {
        this.checked = false;
      }
    },
    // 工价一次性红包数组
    createNumList() {
      this.addManFormRef.numList.push({
        number: null,
        units: "",
        redPacketAmount: null
      });
    },
    // 工价计算删除
    deletelabourList(item, index) {
      this.labourList.splice(index, 1);
    },
    // 工价离职倒扣添加事件
    onChange1(e) {
      if (e.target.checked) {
        this.checked1 = true;
      } else {
        this.checked1 = false;
        this.addManFormRef.leaveList = [];
      }
    },
    // 工价离职倒扣删除
    deleteleaveList(item, index) {
      this.addManFormRef.leaveList.splice(index, 1);
      if (this.addManFormRef.leaveList.length === 0) {
        this.checked1 = false;
      }
    },
    // 工价倒扣数组
    handleMenuClick(e) {
      if (e.key === "1") {
        this.addManFormRef.leaveList.push({
          type: e.key,
          number: null,
          units: "",
          deductAmount: null
        }); // 不满月/天/工时倒扣工资
      } else {
        this.addManFormRef.leaveList.push({
          type: e.key,
          number: null,
          units: "",
          newHourAmount: null
        }); // 不满月/天/工时减少全价
      }
    },
    // 劳务费其他费用
    onChange6(e) {
      if (e.target.checked) {
        this.checked6 = true;
      } else {
        this.checked6 = false;
        this.addManFormRef1.specialCostDouble = 0;
      }
    },
    // 劳务费离职倒扣
    onChange5(e) {
      if (e.target.checked) {
        this.checked5 = true;
      } else {
        this.checked5 = false;
        this.addManFormRef1.leaveList1 = [];
      }
    },
    // 劳务费一次性红包添加事件
    onChange4(e) {
      if (e.target.checked) {
        this.addManFormRef1.numList1.push({
          number: null,
          units: null,
          redPacketAmount: null
        });
        this.checked4 = true;
      } else {
        this.addManFormRef1.numList1 = [];
        this.checked4 = false;
      }
    },
    // 劳务费工时抽成
    onChange3(e) {
      if (e.target.checked) {
        this.checked3 = true;
      } else {
        this.checked3 = false;
        this.addManFormRef1.changeList = [];
      }
    },
    // 劳务费工时抽成变更条件
    handleMenuClick2(e) {
      if (e.key === "1") {
        this.addManFormRef1.changeList.push({
          type: e.key,
          newHourAmount: null,
          time: null
        });
      } else {
        this.addManFormRef1.changeList.push({
          type: e.key,
          number: null,
          units: "",
          newHourAmount: null
        });
      }
    },
    // 劳务费一次性红包删除
    deleteNumList1(item, index) {
      this.addManFormRef1.numList1.splice(index, 1);
      if (this.addManFormRef1.numList1.length === 0) {
        this.checked4 = false;
      }
    },
    // 劳务费一次性红包数组
    createNumList1() {
      this.addManFormRef1.numList1.push({
        number: null,
        units: "",
        redPacketAmount: null
      });
    },
    // 劳务费新增倒扣条件
    deducMenuClick(e) {
      if (e.key === "1") {
        this.addManFormRef1.leaveList1.push({
          type: e.key,
          number: null,
          units: "",
          deductAmount: null
        }); // 不满月/天/工时倒扣工资
      } else {
        this.addManFormRef1.leaveList1.push({
          type: e.key,
          number: null,
          units: "",
          newHourAmount: null
        }); // 不满月/天/工时减少全价
      }
    },
    // 劳务费删除工时抽成条件
    deleteChangeList(item, index) {
      this.addManFormRef1.changeList.splice(index, 1);
      if (this.addManFormRef1.changeList.length === 0) {
        this.checked3 = false;
      }
    },
    //  劳务费离职倒扣删除
    deleteLeave(item, index) {
      this.addManFormRef1.leaveList1.splice(index, 1);
      if (this.addManFormRef1.leaveList1.length === 0) {
        this.checked5 = false;
      }
    },
    disabledEndDate(endValue) {
      const startValue = this.routerData.joinDate;
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() >= endValue.valueOf();
    },
    handleTimeChange(e) {
      this.takeDate = e;
      console.log(e);
    },
    SalaryIncreaseList() {
      const id = this.routerData.empId;
      SalaryIncrease(id).then((res) => {
        this.mainId = res.data.id;
        this.fixedSalaryTemplateName = res.data.fixedSalaryTemplateName;
        this.officialList = res.data.officialList;
        this.trainingList = res.data.trainingList;
        for (var i = 0; i < this.trainingList.length; i++) {
          this.trainingList[i].afterAmount = this.trainingList[i].afterAmount
            ? this.trainingList[i].afterAmount
            : this.trainingList[i].amount;
          this.trainingList[i].projectId = i;
          this.trainingList[i].amplitude = 0.0 + "%";
          this.trainingList[i].relativecolor = "#0DB6AC";
        }
        for (var p = 0; p < this.officialList.length; p++) {
          this.officialList[p].afterAmount = this.officialList[p].afterAmount
            ? this.officialList[p].afterAmount
            : this.officialList[p].amount;
          this.officialList[p].projectId = p;
          this.officialList[p].amplitude = 0.0 + "%";
          this.officialList[p].relativecolor = "#0DB6AC";
        }
      });
    },
    // getSelectByCompanyId() {
    //   selectByCompanyId({ companyId: this.companyId }).then(res => {
    //     this.templateList = res.data;
    //   });
    // },
    // goOut() {
    //   const _this = this;
    //   this.$confirm({
    //     title: "员工调薪尚未保存，是否确认离开？",
    //     onOk() {
    //       _this.$router.go(-1);
    //     }
    //   });
    // },
    // 试用表格输入框变化
    handleInputChange1(value, key) {
      const arr = JSON.parse(JSON.stringify(this.trainingList));
      for (var i = 0; i < arr.length; i++) {
        if (i === key) {
          arr[i].afterAmount = value;
          this.trainingList[i].afterAmount = value;
          if (arr[i].amount === 0) {
            arr[i].amplitude = "--";
          } else {
            arr[i].amplitude = Math.round(((arr[i].afterAmount - arr[i].amount) / arr[i].amount) * 10000) / 100 + "%";
          }
          if (arr[i].afterAmount - arr[i].amount > 0) {
            arr[i].relativecolor = "#FA5051";
          } else {
            arr[i].relativecolor = "#0DB6AC";
          }
        }
      }
      var s = 0;
      for (var t = 0; t < arr.length - 1; t++) {
        s += arr[t].afterAmount;
        arr[arr.length - 1].afterAmount = s;
        if (arr[arr.length - 1].amount === 0) {
          arr[arr.length - 1].amplitude = "--";
        } else {
          arr[arr.length - 1].amplitude =
            Math.round(((arr[arr.length - 1].afterAmount - arr[arr.length - 1].amount) / arr[arr.length - 1].amount) * 10000) / 100 + "%";
        }
        if (arr[arr.length - 1].afterAmount - arr[arr.length - 1].amount > 0) {
          arr[arr.length - 1].relativecolor = "#FA5051";
        } else {
          arr[arr.length - 1].relativecolor = "#0DB6AC";
        }
        this.trainingList = JSON.parse(JSON.stringify(arr));
      }
    },
    // 正式表格输入框变化
    handleInputChange2(value, key) {
      const arr = JSON.parse(JSON.stringify(this.officialList));
      for (var i = 0; i < arr.length; i++) {
        if (i === key) {
          arr[i].afterAmount = value;
          this.officialList[i].afterAmount = value;
          if (arr[i].amount === 0) {
            arr[i].amplitude = "--";
          } else {
            arr[i].amplitude = Math.round(((arr[i].afterAmount - arr[i].amount) / arr[i].amount) * 10000) / 100 + "%";
          }
          if (arr[i].afterAmount - arr[i].amount > 0) {
            arr[i].relativecolor = "#FA5051";
          } else {
            arr[i].relativecolor = "#0DB6AC";
          }
        }
      }
      var s = 0;
      for (var t = 0; t < arr.length - 1; t++) {
        s += arr[t].afterAmount;
        arr[arr.length - 1].afterAmount = s;
        if (arr[arr.length - 1].amount === 0) {
          arr[arr.length - 1].amplitude = "--";
        } else {
          arr[arr.length - 1].amplitude =
            Math.round(((arr[arr.length - 1].afterAmount - arr[arr.length - 1].amount) / arr[arr.length - 1].amount) * 10000) / 100 + "%";
        }
        if (arr[arr.length - 1].afterAmount - arr[arr.length - 1].amount > 0) {
          arr[arr.length - 1].relativecolor = "#FA5051";
        } else {
          arr[arr.length - 1].relativecolor = "#0DB6AC";
        }
        this.officialList = JSON.parse(JSON.stringify(arr));
      }
    },
    handleEmpyleeSubmitType() {
      if (this.size === "small" || this.size === "large") {
        // this.handleEmpyleeSubmit();
        this.saveRule();
      }
      if (this.size === "default") {
        this.handleSubmit();
      }
    },
    saveRule() {
      editEmpInfos({
        id: this.info.id,
        serviceFeeRuleId: this.redPackId ? this.redPackId : "",
        salaryRuleId: this.salaryCalculateRuleId ? this.salaryCalculateRuleId : "",
        phone: this.info.phone,
        salaryType: 2
      }).then((res) => {
        console.log(res);
        this.$message.success("编辑成功");
        if (this.$route.query.state === "outsourcing") {
          this.$router.push({
            path: "/staff/employee"
          });
        } else {
          setTimeout(() => {
            this.$router.push({
              path: "/wages/file",
              query: {
                tabsKey: "2"
              }
            });
          }, 500);
        }
      });
    },
    // 表单提交
    handleSubmit() {
      const serviceFeeRuleAddDTO = {};

      for (var i = 0; i < this.detailsList.length; i++) {
        this.trialTemplateList[i].amount = this.trialTemplateList[i].amount ? this.trialTemplateList[i].amount : 0;
        this.formalTemplateList[i].amount = this.formalTemplateList[i].amount ? this.formalTemplateList[i].amount : 0;
      }
      if (!this.officialList[this.officialList.length - 1].amplitude && !this.trainingList[this.trainingList.length - 1].amplitude) {
        this.$notification["error"]({
          message: "error",
          description: "保存失败,至少更改一项调薪项目"
        });
      } else {
        this.trainingList.forEach((item, index) => {
          item.amount = item.afterAmount;
        });
        this.officialList.forEach((item, index) => {
          item.amount = item.afterAmount;
        });
        empAdjustable({
          serviceFeeRuleId: this.redPackId,
          serviceFeeRuleAddDTO: serviceFeeRuleAddDTO,
          isFixed: 0,
          companyId: this.companyId,
          empId: this.routerData.empId,
          trainingFixedSalaryDetail: this.trainingList,
          officialFixedSalaryDetail: this.officialList,
          reason: this.form.reason,
          effectTime: this.takeDate,
          remark: this.form.remark,
          isOfficial: parseInt(this.routerData.employType),
          id: this.mainId,
          trainingSalarySum: this.trainingList[this.trainingList.length - 1].afterAmount,
          officialSalarySum: this.officialList[this.officialList.length - 1].afterAmount
        }).then(({ success }) => {
          for (var i = 0; i < this.trainingList.length; i++) {
            this.trainingList[i].amount = this.trainingList[i].afterAmount;
          }
          for (var p = 0; p < this.officialList.length; p++) {
            this.officialList[p].amount = this.officialList[p].afterAmount;
          }
          if (success) {
            // if (this.redPackId) {
            editEmpInfos({
              id: this.info.id,
              serviceFeeRuleId: this.redPackId ? this.redPackId : "",
              phone: this.info.phone
              // salaryType: 2
            }).then((res) => {
              this.$message.success("编辑成功");
              if (this.$route.query.state === "outsourcing") {
                this.$router.push({
                  path: "/staff/employee"
                });
              } else {
                setTimeout(() => {
                  this.$router.push({
                    path: "/wages/file",
                    query: {
                      tabsKey: "1"
                    }
                  });
                }, 500);
              }
            });
            // } else {
            //   this.$router.push({
            //     path: "/wages/file",
            //     query: {
            //       tabsKey: "1"
            //     }
            //   });
            //   this.$notification["success"]({ message: "编辑成功" });
            // }
          }
        });
      }
    }
    // 时间
    // 返回
  }
};
</script>
<style lang="scss" scoped>
$body-width: calc(100% - 338px);
.fix-salary-item-wrapper {
  width: 400px;
  .fix-salary-item-tag {
    cursor: pointer;
    height: 28px;
    line-height: 28px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #d7d7d7;
    display: inline-block;
    font-size: 12px;
    margin-right: 10px;
    padding: 0 5px;
  }
  .fix-salary-item-default {
    background: #ededed;
    border-color: #a2a2a2;
  }
  .fix-salary-item-selected {
    background: #ffffff;
    border: 1px solid var(--primary);
    color: var(--primary);
  }
}
.border-r-line {
  border: #adadad;
}
.border {
  margin-top: 20px;
  background-color: #ffffff;
  border-right: 1px solid #e5e5e5;
}
.modelBotton {
  margin-left: 15px;
}
.shu {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 20px;
  .shuxian {
    width: 3px;
    height: 20px;
    background: var(--primary);
  }
}
.rowForm {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  white-space: nowrap;
  align-items: center;
  height: 50px;
}
.deleteIcon:hover {
  color: #fa5051;
}
.addIcon {
  color: var(--primary);
}
.gj {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.title {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: var(--primary);
  cursor: pointer;
}

$body-width: calc(100% - 338px);

.fix-salary-item-wrapper {
  width: 400px;
  .fix-salary-item-tag {
    cursor: pointer;
    height: 28px;
    line-height: 28px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #d7d7d7;
    display: inline-block;
    font-size: 12px;
    margin-right: 10px;
    padding: 0 5px;
  }
  .fix-salary-item-default {
    background: #ededed;
    border-color: #a2a2a2;
  }
  .fix-salary-item-selected {
    background: #ffffff;
    border: 1px solid var(--primary);
    color: var(--primary);
  }
}
.border-r-line {
  border: #adadad;
}
.shu2 {
  width: 100%;
  display: flex;
  margin-top: 24px;
  flex-direction: row;
  align-items: center;
  .shuxian {
    width: 3px;
    height: 20px;
    background: var(--primary);
  }
}
.modelBotton {
  margin-left: 15px;
}
.buttonStyleClick {
  margin-left: 15px;
  border: 1px solid var(--primary);
  color: var(--primary);
}
</style>
